<template>
    <div>
        <p>
            先搞清楚什么是无痕刷新？ <br>
            传统的刷新页面的方式：<br>
            1.window.location.reload() 这是原生js提供的方法 <br>
            2.this.$router.go(0) vue路由刷新 <br>
            这两种方式都可以达到页面刷新的目的，但是用户体验不好，相当于F5刷新页面，页面重新载入，会有短暂的白屏
        </p>
        <p>
            我们想要实现的是用户在我们页面当中通过某种操作实现当前页面或者更准确的说是你所指定的当前路由容器下的组件刷新 <br>
            更准确点说：只刷新你要刷新的局部，不刷新全局
        </p>
        <p>如何实现方式：用 v-if 控制router-view的显示，还需要借助provide / inject</p>
        <p>这对选项组合是如何使用的呢，</p>
        <p>需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效</p>
        <p>
            如下已经实现了无痕刷新，其实很简单，就是在后代进行某种操作修改祖先组件中的数据，这儿是父子组件关系，
            但是真实开发过程中，是很复杂也嵌套多成的
        </p>
        <p>我记得以前在写活动那个项目的时候就很蠢，由于当时业务逻辑很复杂，涉及到了需要跳转并且需要刷新页面，我就使用路由进行中转，现在想想直接用provide和inject不就好了吗</p>
        <p>
            <a href="https://www.cnblogs.com/nanianqiming/p/11784873.html">看看别人写的博客</a>
        </p>

        <button @click="handleBtn">点击进行无痕刷新</button>
    </div>
</template>
<script>
export default {
    inject: ['reload'],
    methods: {
        handleBtn () {
            this.reload();
        }
    },
    created () {
        console.log('重新加载了吗')
    }
}
</script>